<template>
    <div class="main-content">
        <h1 style="margin: 5px 0">短信月报</h1>
        <div class="screen-frame clearfix" style="min-width: 1050px;">
            <div class="row">
                <div class="col-lg-6 col-md-6">
                    <div class="form-horizontal">
                        <div class="form-group">
                            <label class="col-lg-2 col-md-2 col-sm-2 control-label label-title">账期：</label>
                            <div class="col-lg-5 col-md-5 col-sm-5 col-input">
                                <DatePicker type="month" placeholder="开始月份" v-model="params.beginDate" style="width: 200px" format="yyyy年MM月"></DatePicker>
                            </div>
                            <div class="col-lg-4 col-md-4 col-sm-4 col-input" style="margin-left: 20px; text-align: center;">
                                <DatePicker type="month" placeholder="结束月份" v-model="params.endDate" style="width: 200px" format="yyyy年MM月"></DatePicker>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <button  type="button" class="btn btn-theme" v-on:click="getSmsRecordList(1)">查询</button>
                    <button  type="button" class="btn btn-theme" v-if="exportBtnShow" v-on:click="exportInfo" v-res="{code:'menu_0009_0002_0001'}">导出</button>
                    <button  type="button" class="btn btn-theme" v-if="!exportBtnShow" style="background-color: #999;" v-on:click="exportRepeatMsg" v-res="{code:'menu_0009_0002_0001'}">导出{{ timeOut }}</button>
                </div>
            </div>

        </div>
        <div class="table table-striped table-bordered">

            <div class="table-responsive">
                <table class="table table-striped table-bordered min-width-790">
                    <thead>
                    <tr>
                        <th width="20%">序号</th>
                        <th width="30%">类型</th>
                        <th width="25%">发送目标号码</th>
                        <th width="25%">发送时间</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="(row,index) in smsList">
                        <td>{{index + 1}}</td>
                        <td>{{row.remark}}</td>
                        <td>{{row.receiver}}</td>
                        <td>{{row.createTime}}</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div id="laypage_effect_report"></div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                params: {
                    pageNo: 1,
                    pageSize: 10,
                    beginDate:'',
                    endDate : '',
                    userId :window.localStorage.getItem("userId"),
                },
                smsList:[],
                exportBtnShow: true,
                timeOut: 10
            }
        },
        mounted: function() {
            var _self = this;
            _self.getSmsRecordList();
        },
        methods: {
            list: function(pageNo) {
                if(pageNo){
                    this.params.pageNo = 1;
                }

                var _self = this;
                var url = this.utilHelper.apiUrl + "/api/getSmsReport";
                var body = {};
                body.params ={
                    pageNo : this.params.pageNo,
                    pageSize: this.params. pageSize
                }
                if(_self.params.beginDate){
                    body.params.beginDate = _self.params.beginDate;
                }
                if(_self.params.endDate){
                    body.params.endDate = _self.params.endDate;
                }

                _self.$http.post(url, body).then((response) => {
                    var body = response.body.resData;
                    if(body.result == 0) {
                        layer.msg("接口异常!");
                    } else {
                        _self.smsList = body.page.rows;
                        var totalPages = body.page.totalPages;
                        var current = body.page.pageNumber;
                        var total = body.page.total;
                        // if(totalPages > 0) {
                        layui.laypage.render({
                            elem: $('#laypage_effect_report'), //容器。值支持id名、原生dom对象，jquery对象,
                            limit:_self.params.pageSize,
                            curr:current,
                            count:total,
                            theme: '#f87242;', //皮肤
                            first: '首页', //若不显示，设置false即可
                            last: '尾页', //若不显示，设置false即可
                            prev: '上一页', //若不显示，设置false即可
                            next: '下一页', //若不显示，设置false即可
                            layout:['prev', 'page', 'next','skip','count'],
                            jump: function(obj, first) {
                                if(!first) {
                                    _self.params.pageNo = obj.curr;
                                    _self.list();
                                }
                            }
                        });
                    }
                    // }
                });
            },
            getSmsRecordList(){
              var _self = this;
              _self.params.pageNo=1;
              _self.list();
            },
            exportInfo:function(){
                var _self = this;
                _self.exportBtnShow = false;
                let userId = window.localStorage.getItem("1_userId");
                let beginDate ="";
                let endDate = "";
                if(_self.params.beginDate){
                    beginDate ="&params.beginDate=" + _self.utils.dateFormat(_self.params.beginDate,'yyyy-MM-dd');
                }
                if(_self.params.endDate){
                    endDate="&params.endDate=" + _self.utils.dateFormat(_self.params.endDate,'yyyy-MM-dd');
                }

                if(_self.params.premisesId){
                    premisesId = _self.params.premisesId
                }
                var url = _self.utilHelper.apiUrl + "/api/getSmsReportExport?params.userId="+userId
                    +beginDate+endDate +"&params.pageNo="+this.params.pageNo +"&params.loginType=1&params.pageSize="+this.params.pageSize
                location.href = url;

                var exportInterval = setInterval(function(){
                    if(_self.timeOut <= 0 ){
                        window.clearInterval(exportInterval);
                        _self.timeOut = 10;
                        _self.exportBtnShow = true;
                    }else{
                        _self.timeOut -= 1;
                    }
                },1000);
            },
            exportRepeatMsg: function() {
                var _self = this;
				layer.msg(_self.timeOut + '秒后可再次导出,请稍等片刻!');
                return;
            }
        }
    }
</script>

<style scoped>
    .label-title{padding-left:0px;padding-right:0px;}
    .col-input{padding-left:0px;padding-right:0px; margin-left:5px;margin-right: 5px;}
</style>